<template>
    <div class="login-page">
        <div class="login-page-header">
            <img src="/static/img/logo.png">
        </div>
        <section class="login-page-logo-one">
            <img src="/static/img/img_login_one.png">
        </section>
        <section class="login-page-logo-two">
            <img src="/static/img/img_login_two.png">
        </section>
        <section class="login-page-logo-three">
            <img src="/static/img/img_login_thrree.png">
        </section>
        <section class="login-page-logo-four">
            <img src="/static/img/img_login_four.png">
        </section>
        <div class="login-page-body">
            <router-view></router-view>
        </div>


    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'LoginComponent',
        data() {
            return {

            }
        },
        methods: {

        },
        created() {

        },
        mounted() {

        },
    }

</script>
<style rel="stylesheet/scss" lang="scss">
.login-page{
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    &-header{
        margin-top: 162px;
        height: 124px;
    }
    &-body{
        width:368px;
        margin-left: calc((100% - 368px)/2)
    }
    &-footer{
        position: absolute;
        bottom: 56px;
        margin-left: calc((100% - 269px)/2);
        width: 269px;
        height: 50px;
        text-align: center;
        color: rgba(0,0,0,0.45);
        font-family: PingFangSC-Regular;
    }
    &-logo{
        &-one{
            position: absolute;
            top: 78px;
            right: 281px;
            width: 55px;
            height: 64px;
        }
        &-two{
            position: absolute;
            bottom: 111px;
            left: 1220px;
            width: 280px;
            height: 238px;
        }
        &-three{
            position: absolute;
            left: 183px;
            top: 108px;
            width: 220px;
            height: 177px;
        }
        &-four{
            position: absolute;
            left: 82px;
            bottom: 63px;
            width: 140px;
            height: 89px;
        }
    }

}
</style>
